<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冷端优化APP前端控件样式规范</title>
    <style>
        :root {
            /* 基础样式变量 */
            --font-main: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            --font-mono: 'Consolas', 'Monaco', monospace;
            
            /* 字号变量 */
            --font-size-title: 28px;
            --font-size-module: 18px;
            --font-size-data: 22px;
            --font-size-body: 14px;
            --font-size-small: 12px;
            
            /* 间距变量 */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            
            /* 圆角变量 */
            --radius-btn: 4px;
            --radius-card: 6px;
            --radius-input: 4px;
            --radius-badge: 12px;
            
            /* 颜色变量 */
            --color-primary: #2dd4bf; /* 主强调色-水绿色 */
            --color-secondary: #3b82f6; /* 次要强调色-蓝色 */
            --color-success: #10b981; /* 正常状态-绿色 */
            --color-warning: #f59e0b; /* 警告状态-黄色 */
            --color-danger: #ef4444; /* 报警状态-红色 */
            --color-bg-main: #0a101f; /* 主背景-深蓝黑 */
            --color-bg-card: #1a2238; /* 卡片背景-深蓝色 */
            --color-bg-secondary: #141b2d; /* 次要背景 */
            --color-text-primary: #e2e8f0; /* 主要文本-白色 */
            --color-text-secondary: #94a3b8; /* 次要文本-浅灰 */
            --color-border: #334155; /* 边框色-深灰 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--color-bg-main);
            color: var(--color-text-secondary);
            font-family: var(--font-main);
            padding: var(--spacing-lg);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1, h2, h3 {
            color: var(--color-text-primary);
            margin-bottom: var(--spacing-md);
            font-weight: 600;
        }

        h1 {
            font-size: var(--font-size-title);
            color: var(--color-primary);
            border-bottom: 2px solid var(--color-primary);
            padding-bottom: var(--spacing-sm);
            margin-bottom: var(--spacing-lg);
        }

        h2 {
            font-size: var(--font-size-module);
            margin-top: var(--spacing-xl);
            border-left: 3px solid var(--color-primary);
            padding-left: var(--spacing-md);
        }

        h3 {
            font-size: var(--font-size-body + 2);
            color: var(--color-primary);
            margin-top: var(--spacing-lg);
        }

        .section {
            background-color: var(--color-bg-secondary);
            border-radius: var(--radius-card);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
            border: 1px solid var(--color-border);
        }

        .style-example {
            margin: var(--spacing-md) 0;
            padding: var(--spacing-md);
            background-color: var(--color-bg-card);
            border-radius: var(--radius-card);
            border: 1px solid var(--color-border);
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--spacing-md);
            margin: var(--spacing-md) 0;
        }

        .grid-item {
            padding: var(--spacing-md);
            background-color: var(--color-bg-card);
            border-radius: var(--radius-card);
            border: 1px solid var(--color-border);
        }

        .label {
            display: block;
            font-size: var(--font-size-small);
            color: var(--color-text-secondary);
            margin-bottom: var(--spacing-xs);
        }

        /* 按钮样式 */
        .btn {
            padding: 6px 16px;
            border-radius: var(--radius-btn);
            border: none;
            font-family: var(--font-main);
            font-size: var(--font-size-body);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-primary {
            background-color: rgba(45, 212, 191, 0.15);
            border: 1px solid rgba(45, 212, 191, 0.3);
            color: var(--color-primary);
        }

        .btn-secondary {
            background-color: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: #93c5fd;
        }

        .btn-success {
            background-color: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #a7f3d0;
        }

        .btn-warning {
            background-color: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #fde68a;
        }

        .btn-danger {
            background-color: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #fecaca;
        }

        /* 输入框样式 */
        .input-control {
            width: 100%;
            height: 40px;
            padding: 0 var(--spacing-md);
            background-color: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-input);
            color: var(--color-text-primary);
            font-family: var(--font-main);
            font-size: var(--font-size-body);
        }

        .input-control:focus {
            outline: none;
            border-color: var(--color-primary);
        }

        /* 数据卡片样式 */
        .data-card {
            background-color: var(--color-bg-card);
            border-radius: var(--radius-card);
            border: 1px solid var(--color-border);
            padding: var(--spacing-md);
        }

        .data-card-header {
            padding-bottom: var(--spacing-sm);
            border-bottom: 1px solid var(--color-border);
            margin-bottom: var(--spacing-md);
        }

        .data-card-title {
            font-size: var(--font-size-body);
            color: var(--color-text-secondary);
        }

        .data-card-value {
            font-size: var(--font-size-data);
            font-family: var(--font-mono);
            color: var(--color-text-primary);
            font-weight: 600;
        }

        .data-card-unit {
            font-size: var(--font-size-small);
            color: var(--color-text-secondary);
            margin-left: var(--spacing-xs);
        }

        /* 表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid var(--color-border);
            font-size: var(--font-size-body);
        }

        .data-table th {
            background-color: rgba(51, 65, 85, 0.2);
            color: var(--color-text-secondary);
            font-weight: 600;
        }

        .data-table td {
            color: var(--color-text-primary);
        }

        /* 徽章样式 */
        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius-badge);
            font-size: var(--font-size-small);
            font-weight: 500;
        }

        .badge-success {
            background-color: rgba(16, 185, 129, 0.2);
            color: var(--color-success);
        }

        .badge-warning {
            background-color: rgba(245, 158, 11, 0.2);
            color: var(--color-warning);
        }

        .badge-danger {
            background-color: rgba(239, 68, 68, 0.2);
            color: var(--color-danger);
        }

        /* 导航样式 */
        .sidebar {
            width: 220px;
            background-color: var(--color-bg-card);
            border-radius: var(--radius-card);
            border: 1px solid var(--color-border);
            padding: var(--spacing-md);
        }

        .sidebar-menu {
            list-style: none;
        }

        .sidebar-item {
            margin-bottom: var(--spacing-xs);
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: 10px;
            border-radius: var(--radius-btn);
            color: var(--color-text-secondary);
            text-decoration: none;
            font-size: var(--font-size-body);
        }

        .sidebar-link.active {
            background-color: rgba(45, 212, 191, 0.1);
            color: var(--color-primary);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>冷端优化APP前端控件样式规范</h1>

        <!-- 按钮控件 -->
        <section class="section">
            <h2>1. 按钮控件</h2>
            <div class="style-example">
                <div class="label">主要按钮（登录、授权等）</div>
                <button class="btn btn-primary">
                    <i>⌕</i> 主按钮
                </button>
            </div>
            <div class="style-example">
                <div class="label">次要按钮（取消、导出等）</div>
                <button class="btn btn-secondary">
                    <i>↓</i> 次要按钮
                </button>
            </div>
            <div class="style-example">
                <div class="label">状态按钮（操作建议等）</div>
                <button class="btn btn-success">正常操作</button>
                <button class="btn btn-warning" style="margin-left: 10px;">警告操作</button>
                <button class="btn btn-danger" style="margin-left: 10px;">紧急操作</button>
            </div>
            <div class="style-example">
                <div class="label">样式参数</div>
                <ul>
                    <li>padding: 6px 16px</li>
                    <li>border-radius: 4px</li>
                    <li>字体大小: 14px</li>
                    <li>图标与文字间距: 6px</li>
                </ul>
            </div>
        </section>

        <!-- 输入框控件 -->
        <section class="section">
            <h2>2. 输入框控件</h2>
            <div class="style-example">
                <div class="label">文本输入框（账号、密码等）</div>
                <input type="text" class="input-control" placeholder="请输入内容">
            </div>
            <div class="style-example">
                <div class="label">下拉选择框（机组选择等）</div>
                <select class="input-control">
                    <option>华光电厂3号机组</option>
                    <option>崇光电厂5号机组</option>
                    <option>潞光电厂2号机组</option>
                </select>
            </div>
            <div class="style-example">
                <div class="label">样式参数</div>
                <ul>
                    <li>height: 40px</li>
                    <li>padding: 0 16px</li>
                    <li>border-radius: 4px</li>
                    <li>字体大小: 14px</li>
                </ul>
            </div>
        </section>

        <!-- 数据卡片控件 -->
        <section class="section">
            <h2>3. 数据卡片控件</h2>
            <div class="style-example">
                <div class="data-card">
                    <div class="data-card-header">
                        <div class="data-card-title">当前背压</div>
                    </div>
                    <div>
                        <span class="data-card-value">13.2</span>
                        <span class="data-card-unit">kPa</span>
                    </div>
                </div>
            </div>
            <div class="style-example">
                <div class="data-card">
                    <div class="data-card-header">
                        <div class="data-card-title">机组负荷</div>
                    </div>
                    <div>
                        <span class="data-card-value">320</span>
                        <span class="data-card-unit">MW</span>
                    </div>
                </div>
            </div>
            <div class="style-example">
                <div class="label">样式参数</div>
                <ul>
                    <li>内边距: 16px</li>
                    <li>border-radius: 6px</li>
                    <li>标题字体: 14px（浅灰色）</li>
                    <li>数据字体: 22px（等宽字体，白色）</li>
                    <li>单位字体: 12px（深灰色）</li>
                </ul>
            </div>
        </section>

        <!-- 表格控件 -->
        <section class="section">
            <h2>4. 表格控件</h2>
            <div class="style-example">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>机组</th>
                            <th>背压(kPa)</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>08:00</td>
                            <td>华光电厂3号机</td>
                            <td>13.1</td>
                            <td><span class="badge badge-success">正常</span></td>
                        </tr>
                        <tr>
                            <td>10:00</td>
                            <td>华光电厂3号机</td>
                            <td>13.8</td>
                            <td><span class="badge badge-warning">警告</span></td>
                        </tr>
                        <tr>
                            <td>12:00</td>
                            <td>华光电厂3号机</td>
                            <td>14.2</td>
                            <td><span class="badge badge-danger">报警</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="style-example">
                <div class="label">样式参数</div>
                <ul>
                    <li>单元格内边距: 10px</li>
                    <li>字体大小: 14px</li>
                    <li>表头背景: 深灰色透明</li>
                    <li>边框: 底部1px深灰色线</li>
                </ul>
            </div>
        </section>

        <!-- 状态徽章控件 -->
        <section class="section">
            <h2>5. 状态徽章控件</h2>
            <div class="style-example">
                <div class="label">状态标识（正常/警告/报警）</div>
                <span class="badge badge-success">正常</span>
                <span class="badge badge-warning" style="margin-left: 10px;">预警</span>
                <span class="badge badge-danger" style="margin-left: 10px;">报警</span>
            </div>
            <div class="style-example">
                <div class="label">样式参数</div>
                <ul>
                    <li>padding: 2px 8px</li>
                    <li>border-radius: 12px（圆形）</li>
                    <li>字体大小: 12px</li>
                    <li>正常: 绿色透明背景+绿色文字</li>
                    <li>警告: 黄色透明背景+黄色文字</li>
                    <li>报警: 红色透明背景+红色文字</li>
                </ul>
            </div>
        </section>

        <!-- 导航控件 -->
        <section class="section">
            <h2>6. 导航控件</h2>
            <div class="style-example">
                <div class="label">左侧功能导航（驾驶舱/状态监测等）</div>
                <div class="sidebar">
                    <ul class="sidebar-menu">
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link active">
                                <i>📊</i> 驾驶舱
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i>🔍</i> 状态监测
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i>🔧</i> 背压优化
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i>🧼</i> 散热片清洁
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a href="#" class="sidebar-link">
                                <i>❄️</i> 冬季防冻
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="style-example">
                <div class="label">样式参数</div>
                <ul>
                    <li>宽度: 220px</li>
                    <li>菜单项高度: 40px</li>
                    <li>内边距: 10px</li>
                    <li>选中项背景: 水绿色透明</li>
                    <li>选中项文字: 水绿色</li>
                    <li>未选中文字: 浅灰色</li>
                </ul>
            </div>
        </section>
    </div>
</body>
</html>